<template>
  <div class="medical-988">
    <div class="content-wrapper">
      <div v-if="loading" class="loading-overlay">
        <i class="el-icon-loading"></i>
        <p>正在加载数据...</p>
      </div>

      <!-- 标题区域 -->
      <div class="title-section">
        <h3 class="module-title">988就医情况</h3>
        <div class="info-button-container">
          <button
            class="info-button"
            @mouseenter="showTooltip = true"
            @mouseleave="showTooltip = false"
          >
            <i class="el-icon-notebook-2"></i>
          </button>
          <!-- 提示弹窗 -->
          <div
            v-show="showTooltip"
            class="tooltip-popup"
          >
            {{ medicalInfoText }}
          </div>
        </div>
      </div>

      <div class="medical-records-container">
        <div class="medical-records">
          <el-table
            :data="pagedMedicalRecords"
            style="width: 100%"
            :header-cell-style="{ fontSize: '18px' }"
            :row-class-name="tableRowClassName"
            :cell-style="{ borderColor: '#68d8fe' }"
            border
            class="custom-table"
          >
            <el-table-column
              prop="name"
              label="姓名"
              width="180"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="classes"
              label="班级"
              width="150"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="groupName"
              label="组别"
              width="150"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="visitDate"
              label="日期"
              width="180"
              align="center"
            >
              <template slot-scope="scope">
                {{ formatDate(scope.row.visitDate) }}
              </template>
            </el-table-column>
            <el-table-column
              prop="visitTime"
              label="就诊时间"
              width="180"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="visitReason"
              label="缘由"
              min-width="200"
              align="center"
            ></el-table-column>
          </el-table>
          <div class="pagination">
            <button
              :disabled="currentPage === 1"
              @click="changePage(currentPage - 1)"
              class="page-btn"
            >
              <i class="el-icon-arrow-left"></i>
            </button>
            <span class="page-info">
              第 <b>{{ currentPage }}</b> / <b>{{ totalPages }}</b> 页
            </span>
            <button
              :disabled="currentPage === totalPages"
              @click="changePage(currentPage + 1)"
              class="page-btn"
            >
              <i class="el-icon-arrow-right"></i>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import api from '@/api/overview';

export default {
  name: "Medical988",
  data() {
    return {
      loading: true,
      medicalRecords: [],
      currentPage: 1,
      itemsPerPage: 15,
      showTooltip: false,
      medicalInfoText: '第二百一十条  军人患病，应当及时将病情报告直接首长，经批准前往就医，由经治医师决定门诊、住院或者回队治疗，并根据病情开具相关证明。对急症病人，军队医疗卫生机构应当随时诊治。'
    };
  },
  computed: {
    pagedMedicalRecords() {
      const start = (this.currentPage - 1) * this.itemsPerPage;
      const end = start + this.itemsPerPage;
      return this.medicalRecords.slice(start, end);
    },
    totalPages() {
      return Math.ceil(this.medicalRecords.length / this.itemsPerPage);
    }
  },
  methods: {
    // 格式化日期显示
    formatDate(dateStr) {
      if (!dateStr) return "";

      // 处理数字格式的日期 (如 20250426)
      if (/^\d{8}$/.test(dateStr)) {
        const year = dateStr.substring(0, 4);
        const month = dateStr.substring(4, 6);
        const day = dateStr.substring(6, 8);
        return `${year}-${month}-${day}`;
      }

      // 尝试常规日期解析
      const date = new Date(dateStr);
      if (!isNaN(date.getTime())) {
        return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
      }

      return dateStr;
    },

    // 设置表格行样式
    tableRowClassName({ rowIndex }) {
      return rowIndex % 2 === 0 ? "even-row" : "odd-row";
    },

    // 获取988就诊记录数据
    async fetchMedicalRecords() {
      this.loading = true;
      try {
        const res = await api.getVisitdoctor();
        if (res.code === '200') {
          this.medicalRecords = res.data.map(item => ({
            id: item.id || '',
            name: item.name || '',
            groupName: item.groupName || '',
            classes: item.classes || '',
            visitDate: item.visitDate || '',
            visitTime: item.visitTime || '',
            visitReason: item.visitReason || '',
            createDate: item.createDate || ''
          }));
        } else {
          this.$message.error(res.msg || '获取数据失败');
        }
      } catch (error) {
        console.error('加载988就诊记录失败:', error);
        this.$message.error('加载988就诊记录失败，请检查API连接');
      } finally {
        this.loading = false;
      }
    },
    changePage(page) {
      if (page < 1 || page > this.totalPages) return;
      this.currentPage = page;
    },

    // 加载988就医情况说明文本
    async loadMedicalInfoText() {
      try {
        const response = await fetch('/tltl.txt');
        if (response.ok) {
          const text = await response.text();
          // 提取"4、"后面的文本，直到下一个序号或文件结束
          const regex = /4、(.*?)(?=\s*\d+、|$)/s;
          const match = text.match(regex);
          if (match && match[1]) {
            this.medicalInfoText = match[1].trim();
            console.log('988就医情况说明文本:', this.medicalInfoText);
          } else {
            console.error('未找到988就医情况说明文本');
          }
        } else {
          console.error('加载988就医情况说明文本失败');
        }
      } catch (error) {
        console.error('加载988就医情况说明文本出错:', error);
      }
    }
  },
  created() {
    this.fetchMedicalRecords();
    this.loadMedicalInfoText();
  }
};
</script>

<style lang="scss" scoped>
.medical-988 {
  color: #d3d6dd;
  width: 100%;
  height: 100%;
  position: relative;

  // 标题区域样式
  .title-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding: 0 10px;

    .module-title {
      font-size: 28px;
      font-weight: bold;
      color: #68d8fe;
      margin: 0;
      text-shadow: 0 0 10px rgba(104, 216, 254, 0.3);
    }

    .info-button-container {
      position: relative;

      .info-button {
        background: linear-gradient(135deg, #1e2746 0%, #223a5e 100%);
        border: 1px solid #68d8fe;
        border-radius: 50%;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 2px 8px rgba(104, 216, 254, 0.2);

        &:hover {
          background: linear-gradient(135deg, #68d8fe 0%, #1e2746 100%);
          transform: scale(1.1);
          box-shadow: 0 4px 15px rgba(104, 216, 254, 0.4);
        }

        i {
          font-size: 16px;
          color: #68d8fe;
          transition: color 0.3s ease;
        }

        &:hover i {
          color: #fff;
        }
      }

      .tooltip-popup {
        position: absolute;
        top: 40px;
        right: 0;
        background: rgba(29, 33, 39, 0.95);
        border: 1px solid #68d8fe;
        border-radius: 8px;
        padding: 12px 16px;
        color: #d3d6dd;
        font-size: 16px;
        line-height: 1.5;
        max-width: 350px;
        min-width: 300px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 0 15px rgba(104, 216, 254, 0.3);
        z-index: 1000;
        backdrop-filter: blur(10px);
        animation: fadeInUp 0.3s ease;

        &::before {
          content: '';
          position: absolute;
          top: -8px;
          right: 15px;
          width: 0;
          height: 0;
          border-left: 8px solid transparent;
          border-right: 8px solid transparent;
          border-bottom: 8px solid #68d8fe;
        }

        &::after {
          content: '';
          position: absolute;
          top: -7px;
          right: 15px;
          width: 0;
          height: 0;
          border-left: 8px solid transparent;
          border-right: 8px solid transparent;
          border-bottom: 8px solid rgba(29, 33, 39, 0.95);
        }
      }
    }
  }

  .loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(29, 33, 39, 0.8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10;

    p {
      margin-top: 10px;
      color: #fff;
    }
  }

  .medical-records-container {
    display: flex;
    justify-content: center;
    width: 100%;
    height: calc(100% - 80px);
  }

  .medical-records {
    width: 100%;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.6), 0 0 5px rgba(104, 216, 254, 0.3);
    border-radius: 10px;
    overflow: hidden;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
  }

  :deep(.el-table) {
    background-color: transparent;
    height: 100%;
    border: 2px solid #68d8fe;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(104, 216, 254, 0.3);

    th {
      background: linear-gradient(to bottom, #2c3e50, #1d2127) !important;
      border-bottom: 2px solid #68d8fe;
      border-right: 1px solid #68d8fe;
      font-weight: bold;
      padding: 15px 0;
      font-size: 18px !important;
      color: #68d8fe !important;
    }

    td {
      background-color: rgba(29, 33, 39, 0.8);
      border-bottom: 1px solid #68d8fe;
      border-right: 1px solid #68d8fe;
      color: #fff;
      padding: 12px 0;
      font-size: 16px;
      transition: background-color 0.2s ease;
    }

    .even-row td {
      background-color: rgba(29, 33, 39, 0.8);
    }

    .odd-row td {
      background-color: rgba(19, 25, 47, 0.8);
    }

    .el-table__row:hover > td {
      background-color: rgba(45, 50, 62, 0.9) !important;
    }

    .el-table__header-wrapper {
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
      overflow: hidden;
    }

    .el-table__body-wrapper {
      border-bottom-left-radius: 8px;
      border-bottom-right-radius: 8px;
      overflow-y: auto !important;
      overflow-x: hidden;
      max-height: 100%;
      scrollbar-width: thin;
      scrollbar-color: #68d8fe #1d2127;

      &::-webkit-scrollbar {
        width: 8px;
      }

      &::-webkit-scrollbar-track {
        background: #1d2127;
        border-radius: 4px;
      }

      &::-webkit-scrollbar-thumb {
        background-color: #68d8fe;
        border-radius: 4px;
        border: 2px solid #1d2127;
      }
    }

    // Remove last column's right border
    th:last-child,
    td:last-child {
      border-right: none;
    }

    // Fix border issues
    &::before {
      display: none;
    }

    .el-table__fixed::before,
    .el-table__fixed-right::before {
      display: none;
    }
  }

  .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 8px;
    gap: 8px;
    background: transparent;
    border-radius: 6px;
    padding: 2px 8px;
    box-shadow: none;

    .page-btn {
      background: linear-gradient(90deg, #1e2746 0%, #223a5e 100%);
      border: none;
      color: #68d8fe;
      font-size: 14px;
      border-radius: 50%;
      width: 26px;
      height: 26px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s, color 0.2s;
      cursor: pointer;
      box-shadow: none;

      &:hover:not(:disabled) {
        background: linear-gradient(90deg, #68d8fe 0%, #1e2746 100%);
        color: #fff;
      }
      &:disabled {
        color: #888;
        background: #222b44;
        cursor: not-allowed;
        opacity: 0.5;
      }
    }

    .page-info {
      color: #d3d6dd;
      font-size: 16px;
      font-weight: 500;
      b {
        color: #68d8fe;
        font-size: 18px;
        font-weight: bold;
        margin: 0 2px;
      }
    }
  }
}

// 动画定义
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
